<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getChannelsAPI } from '@/apis/user'
import type { ChannelItem } from '@/types'

const props = defineProps<{ modelValue?: number | undefined | null }>()
const emit = defineEmits(['update:modelValue'])
const channelList = ref<ChannelItem[]>([])
const getChannelList = async () => {
  const res = await getChannelsAPI()
  console.log('res', res)
  channelList.value = res.data.channels
}

onMounted(() => {
  getChannelList()
})
</script>

<template>
  <el-select
    placeholder="请选择"
    clearable
    :modelValue="props.modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
  >
    <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id">
    </el-option>
  </el-select>
</template>

<style scoped></style>
